<template>
  <div class="user-management">
    <!-- <div></div> -->
    <div class="user-management-window">
      <div class="user-management-center">
        <!-- 导航 -->
        <navigation class="user-management-navigation"></navigation>
        <div class="user-management-wrapper flex">
          <!-- 菜单 -->
          <div class="user-management-menu shrink-0">
            <div class="user-management-menu-item" :class="{ active: isActiveMenu === 1 }" @click="handleMenuClick(1)">用户管理</div>
            <div class="user-management-menu-item" :class="{ active: isActiveMenu === 2 }"  @click="handleMenuClick(2)">权限管理</div>
          </div>
          <!-- 用户组 -->
           <div class="user-management-container flex-1">
             <router-view></router-view>
           </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import navigation from './components/navigation.vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const isActiveMenu = ref(1)

// 点击菜单跳转
const handleMenuClick = (menu: number) => {
  isActiveMenu.value = menu
  if (menu === 1) {
    router.push('/userManagement/userGroup')
  } else if (menu === 2) {
    router.push('/userManagement/permissionManagement')
  }
}


// 监听当前路由，保证刷新后也能高亮对应菜单
watch(
  () => route.path,
  (path) => {
    if (path.startsWith('/userManagement/userGroup')) {
      isActiveMenu.value = 1
    } else if (path.startsWith('/userManagement/permissionManagement')) {
      isActiveMenu.value = 2
    }
  },
  { immediate: true }
)

</script>

<style lang="scss" scoped>
.user-management {
  width: 100vw;
  height: 100vh;
}
.user-management-window {
  height: calc(100% - 0px);
  background-color: #1a1a1a;
  color: #c4c4c4;
  .user-management-center {
    height: 100%;
    .user-management-navigation {
      height: 40px;
      border-bottom: 1px solid #333;
    }
    .user-management-wrapper {
      height: calc(100% - 40px);
    }
    .user-management-menu{
      width: 180px;
      height: 100%;
      border-right: 1px solid #333;
      padding: 10px;
      .user-management-menu-item{
        height: 40px;
        line-height: 40px;
        text-align: center;
        border-radius: 6px;
        cursor: pointer;
        &:hover{
          background-color: #333;
        }
        &.active{
          background-color: #3484EA;
          color: #fff;
        }
      }
    }
    .user-management-container {
      height: 100%;
    }
  }
}
</style>
